<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/online.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/vue-v2.6.10.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<style>
    .point{
        cursor: pointer;
    }
</style>

<body>
    <div id="app">
        <!-- 导航菜单 -->
        <nav>
            <div class="main">
                <img src="../img/public/logo.png" alt="" class="logo">
                <ul>
                    <li><a href="../index.html">首页</a></li>
                    <li class="check"><a href="online.html">全部课程</a></li>
                    <li><a href="javascript:;">在线练习</a></li>
                    <li><a href="javascript:;">精品课程</a></li>
                </ul>
                <div class="search">
                    <div class="left">课程<i class="iconfont icon-down"></i>
                    </div>
                    <input type="text"  v-model= "courseName" @blur = "findByCourseName()" placeholder="搜索感兴趣的内容">
                    <img src="../img/public/search.png" alt="">
                </div>

                <div class="login">
                    <a href="./loginAndRegister/login.html">登陆</a>
                    /
                    <a href="./loginAndRegister/register.html">注册</a>
                </div>
                <div class="user" style="display: none;">
                    <img src="../img/login/user.png" alt="">
                    <div class="userlist">
                        <ul>
                            <li>老杜</li>
                            <a href="../pages/course.html">
                                <li>课程中心</li>
                            </a>
                            <li>订单中心</li>
                            <li>资金管理</li>
                            <li>个人中心</li>
                            <li class="out">退出登陆</li>
                        </ul>
                    </div>
                </div>

            </div>
        </nav>

        <!-- 主体内容 -->
        <main>
            <div class="row">
                <div class="left">按版本选择</div>
                <div class="right">
                    <ul>
                        <li><a :class="{active:courseType==''}" @click= "changeCourseType('')">全部</a></li>
                        <li><a :class="{active:courseType==1}"  @click= "changeCourseType(1)">java</a></li>
                        <li><a :class="{active:courseType==2}"  @click= "changeCourseType(2)">数据库</a></li>
                        <li><a :class="{active:courseType==3}"  @click= "changeCourseType(3)">前端</a></li>
                    </ul>
                </div>
            </div>
            <div class="lesson">
                <ul style="text-align:center;">
                    <li v-for = "item in courseList">
                        <div class="top">
                            <a :href="'videoDetail.html?cid='+item.cid">
                                <img src="'http://localhost:8080/eduimg/'+item.courseImage" alt=""class="m"></a>
                            <p>价格：￥{{item.coursePrice}}</p>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <span>{{item.courseName}}</span>
                                <span class="time">{{item.descs}}</span>
                            </div>
                            <div class="right">免费学习</div>
                        </div>
                    </li>
                    
                </ul>
            </div>

            <div class="pageNum">
                <button class="point" @click="changeCurrentPage(1)">首页</button>
                <button class="point" @click="changeCurrentPage(prePage)">上一页</button>
                <ul>
                    <li class = "point" v-for = "page in totalPage" :class="{active:page==currentPage}" @click = "changeCurrentPage(page)">{{page}}</li>
                </ul>
                <button class="point" @click="changeCurrentPage(nextPage)">下一页</button>
                <button class="point" @click="changeCurrentPage(totalPage)">尾页</button>
            </div>
        </main>
        <footer>
            <div class="cont">
                <div class="main">
                    <p>
                        首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 |
                        营业执照
                        | 教师资格证公示
                    </p>
                    <p>
                        京ICP备10218183号-1 京ICP证161188号 七易时代科技有限公司 | 地址：北京市昌平区慧聪采购园 | 电话：010-66666666 | 京公网安备
                        01010102002533号
                    </p>
                    <p>
                        京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    </p>
                    <p>在线教育许可证：小优课堂经营许可证20188008号 | 互联网教育服务资格证书：(京)-经营性-2018-0011 |</p>
                </div>
            </div>
        </footer>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            courseList:"",
            pageSize:6,
            currentPage:1,
            totaCount:"",
            prePage:"",
            nextPage:"",
            totalPage:"",
            courseName:"",
            courseType:"",

        },
        methods: {
            findByPageFront(){
                var url = "http://localhost:8080/myedu/fcourse?method=findByPageFront&pageSize="+
                this.pageSize+"&currentPage="+this.currentPage+"&courseType="+this.courseType+
                "&courseName="+this.courseName;
                axios.get(url).then(resp =>{
                    this.courseList=resp.data.data.list;
                    this.totaCount = resp.data.data.totaCount;
                    this.prePage = resp.data.data.prePage;
                    this.nextPage = resp.data.data.nextPage;
                    this.totalPage = resp.data.data.totalPage;
                    
                })
            },
            //改变页码
            changeCurrentPage(page){
                this.currentPage=page;
                this.findByPageFront();

            },
            //根据课程类型查询
            changeCourseType(type){
               this.currentPage=1;
               if (type==""||type==undefined) {
                   this.courseType=""
                   
               }else{
                   this.courseType=type;
               }
               this.findByPageFront();

            },
            //模糊查询
            findByCourseName(){
                this.currentPage=1;
                this.findByPageFront();
            }
        },
        created() {
            this.findByPageFront();
        },

    })
</script>

</html>